<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8" />
    <title>时间日志</title>
    <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="css/editormd.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
    <style type="text/css">
        .fragment{
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            margin-top: 20px;
        }
        .fragment-item{
            display: flex;
            width: 22%;
            margin-right: 4%;
            height: 20px;
            margin-bottom: 10px;
            border:1px solid darkseagreen;
            border-radius: 4px;
            /* // background:linear-gradient(left,#09BB07,#FFF); */
        }
        .fragment-item-inner{
            flex: 1;
            border-right: 1px solid #e5e5e5;
            margin-top:0 !important;
        }
        .fragment-item-inner-progress{
            width: 100%;
            height: 100%;
            background-color: #f2f2f2;
            position: relative;
        }
        .fragment-item-inner-progress-item{
            width: 100%;
            background-color: #7eb7f0;
            position: absolute;
            left: 0px;
            bottom: 0px;
            border: 0;
            z-index: 1;
        }
        .fragment-item-inner-progress.multi::before{
            position: absolute;
            content: '';
            z-index: 2;
            height: 10px; width: 10px;
            top: 5px;
            background: #c00;
            border-radius: 50%;
            left: 50%;
            margin-left: -5px;
        }
        .fragment-item-inner:nth-child(6n){
            flex: 1;
            border-right: 0;
        }
        .fragment-item:nth-child(4n){
            margin-right:0;
        }
    </style>
</head>

<body>
    <div id="layout">
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/editormd.js"></script>
    <script src="js/moment.min.js"></script>
    <script src="parseTlog.js"></script>
    <script src="underscore-min.js"></script>
    <script type="text/javascript">
    var testEditor;
    var day = GetQueryString("day") || "8-19";
    day = day.replace("/", "");
    $(function() {
        if (GetQueryString("md")) { //http://localhost:2000/?day=05-08&md=true
            $.get(day + '.md', function(md) {
                showMd(md);
            });
        } else {
            $.get(day + '.tlog', function(tlog) {
                // setUseLink(true);
                var dayPro = parseTlog(tlog);
                
                var md = getDayMD(dayPro, false);
                showMd(md);
            });
        }


        $("#layout").hide();

        showPreview();

        function showMd(md) {
            testEditor = editormd("layout", {
                width: "90%",
                height: 740,
                path: 'lib/',
                previewTheme: "dark",
                editorTheme: "pastel-on-dark",
                markdown: md,
                codeFold: true,
                //syncScrolling : false,
                saveHTMLToTextarea: true, // 保存 HTML 到 Textarea
                searchReplace: true,
                //watch : false,                // 关闭实时预览
                htmlDecode: "style,script,iframe|on*",
                emoji: true,
                taskList: true,
                tocm: true, // Using [TOCM]
                tex: true, // 开启科学公式TeX语言支持，默认关闭
                flowChart: true, // 开启流程图支持，默认关闭
                sequenceDiagram: true, // 开启时序/序列图支持，默认关闭,
                fragment: true, //开启碎片图
                imageUpload: true,
                imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL: "./php/upload.php",
                mind: true,
                onload: function() {
                    console.log('onload', this);
                }
            });
        }

        function showPreview() {
            try {
                testEditor.previewing();
                $(".markdown-body").appendTo("body");
                //$("#layout").hide();
                $("#layout").remove();
            } catch (e) {
                setTimeout(function() {
                    showPreview();
                }, 5)
            };
        }
    });

    function GetQueryString(name) {     
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");     
        var r = window.location.search.substr(1).match(reg);     
        if (r != null) return  unescape(r[2]);
        return null;
    }

    </script>
</body>

</html>